<template>
  <div class="loginPhone">
    <SearchIcon title="网易严选"></SearchIcon>
    <img class="middleImg" src="//yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="" />
    <div>
      <!-- v-model="username"
      @submit="onSubmit" -->
      <van-form class="formContainer" @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="phone"
            maxlength="11"
            name="phone"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <!-- v-model="password" -->
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="danger" native-type="submit"> 登录 </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Login'
})
</script>
<script lang="ts" setup>
import userLogin from '@/api/userLogin'
import { useRouter } from 'vue-router'
import { setToken } from '@/utils/auth'
import { showFailToast, showSuccessToast } from 'vant'
import { useUserInfoStore } from '@/stores/userInfo'
import { ref, toRefs } from 'vue'
import TokenData from '@/api/userLogin'
//通过ref获取组件dom元素标签
//电话
const phone = ref('')
//密码
const password = ref('')
//创建路由器
const router = useRouter()
//接收仓库数据
const userInfoStore = useUserInfoStore()

//form表单的提交校验
const onSubmit = async (values: any) => {
  try {
    const result = await userLogin.getLogin(values)
    setToken(result.token)
    if (result.code == 200) {
      showSuccessToast('登录成功')
      router.push('/adminCenter')
    } else {
      showSuccessToast(result.message)
    }
  } catch (error) {
    showFailToast('手机号或密码不正确')
  }
}
</script>

<style lang="less" scoped>
.loginPhone {
  width: 100%;
  height: 45x;
  text-align: center;
  margin-top: 80px;
}
.middleImg {
  width: 134px;
  height: 45px;
}
.formContainer {
  margin-top: 100px;
}
</style>
